import React, { Component } from "react";



export default class Son extends Component {
  
  constructor(props){
    super(props);
    console.log("constructor");
    this.state = {
      age:20,
      a:"",
      isAdult:"未成年"
    }
  }


  // react17之后，不建议使用该钩子函数。替代它的是：static getDerivedStateFromProps
  // componentWillMount(){
  //   console.log("componentWillMount");
  // }

  // 初次渲染之前，调用的钩子函数。
  // 重新渲染之前，调用的钩子函数。
  static getDerivedStateFromProps(nextProps, prevState){
    console.log("getDerivedStateFromProps");
    prevState.a = "体重："+nextProps.weight;
    prevState.isAdult = prevState.age>=18?"已成年":"未成年";
  } 

 componentDidMount(){
    console.log("componentDidMount");
  }

  // 组件应该更新吗？
  shouldComponentUpdate(){
    console.log("shouldComponentUpdate");
    return true;
  }

  // react17之后，不建议使用该钩子函数。替代它的是：static getDerivedStateFromProps
  // componentWillUpdate(){
  //   console.log("componentWillUpdate");
  // }

  // react17之后，不建议使用该钩子函数。替代它的是：static getDerivedStateFromProps
  // componentWillReceiveProps(){
  //   console.log("componentWillReceiveProps");
  // }

  componentDidUpdate=()=>{
    console.log("componentDidUpdate");
  }

  changeAge=()=>{
    this.setState({
      age:this.state.age+1
    })
  }

  render() {
    console.log("render");
    return (
      <div>
        <h1>子组件</h1>
        <p>年龄：{this.state.age}</p>
        <p>是否成年：{this.state.isAdult}</p>
        <input type="button" value="修改年龄" onClick={this.changeAge} />
        <p>{this.state.a}</p>
        <p>this.props.weight：{this.props.weight}</p>
      </div>
    );
  }
}


